<!--
 * @Author: ShiJunJie
 * @Date: 2022-03-14 18:00:37
 * @LastEditors  : ShiJunJie
 * @LastEditTime : 2022-04-18 16:39:19
 * @Descripttion: 
-->
<template>
  <div>
    <a-button type="link" @click="infoModal.show()">设置显示字段</a-button>
    <BaseModal ref="infoModal" title="设置显示字段" :width="700" @ok="infoSubmit">
      <a-checkbox-group v-model:value="checked" name="checkboxgroup" :options="newOptions" />
    </BaseModal>
  </div>
</template>

<script setup>
import { ref, toRaw, reactive, onMounted, computed } from 'vue'

const props = defineProps({
  options: { style: Array, default: () => [] },
})
const emit = defineEmits(['submit'])

const optionsMap = computed(() => {
  const _resData = {}
  props.options.forEach(e => (_resData[e.title] = e))
  return _resData
})
const checked = ref(Object.keys(optionsMap.value))
const checkedNew = ref(checked.value)

const newOptions = computed(() => props.options.map((e, i) => ({ label: e.title, value: e.title, disabled: i === 0 })))

let infoModal = ref(null)
const infoSubmit = async () => {
  checkedNew.value = checked.value
  infoModal.value.hide()
}
defineExpose({
  show: () => infoModal.value.show(),
  columns: computed(() => {
    return Array.from(checkedNew.value, e => optionsMap.value[e])
  }),
})
</script>

<style lang="scss" scoped>
:deep(.ant-checkbox-wrapper) {
  min-width: 100px;
}
</style>
